<template>
	<view class="common-content pt-24">
		<!-- 我的评价 -->
		<view class="common-content-box comprehensive-comments" v-if="commentsData.scoreAvg">
			<view class="comments-grade">
				<view class="socreAvg">{{commentsData.scoreAvg ? commentsData.scoreAvg.toFixed(1) : '--'}}</view>
				<view class="favorable-rate-row mr-20">
					<view class="favorable-rate">
						<text>好评{{getPraiseRate}}</text>
					</view>
					<u-rate :active-color="activeColor" :inactive-color="inactiveColor" inactive-icon="star-fill"
						:disabled="true" gutter="10" current="4"></u-rate>
				</view>
				<view class="comments-detail">
					<view class="">
						<view class="text mr-20">· 全部 {{getAll || '--'}}</view>
						<view class="text">· 好评 {{commentsData.wellReceived || '--'}}</view>
					</view>
					<view class="">
						<view class="text mr-20">· 中评 {{commentsData.middleReceived || '--'}}</view>
						<view class="text">· 差评 {{commentsData.negativeReceived || '--'}}</view>
					</view>
				</view>
			</view>
			
			<view class="replayNum">
				患者评价({{dataList.length}})
			</view>
			<view class="comments-row"
			 v-for="(item,index) in dataList" :key="index" @tap="toApply(item)">
				<view class="comments-peo">
					<u-avatar :src="item.member.face || ''" mode="circle" size="72" class="mr-20"></u-avatar>
					<view class="name-date">
						<text class="name">{{item.member.nickName || '--'}}</text>
						<text class="date">{{item.member.createTime || '--'}}</text>
					</view>
					<view class="evaluation">
						<text>{{item.grade ? (item.grade).toFixed(1) : 5}}</text>
						<u-rate :active-color="activeColor" :inactive-color="inactiveColor" inactive-icon="star-fill"
							:disabled="true" gutter="10" :current="item.grade  || 5"></u-rate>
					</view>
				</view>
				<view class="comments-text">
					<text>{{item.userEvaluate || '此用户没有填写评价'}}</text>
				</view>
				<view class="comments-img" v-if="item.imgUrl">
					<image :src="img" mode="aspectFill" class="img"
						v-for="(img,imgIndex) in item.imgUrl.split(',').slice(0,3)" :key="imgIndex"></image>
				</view>
				<view class="comments-replay" v-if="item.expertReply">
					<view class="replay-text"><text
							class="replay-title">专家回复：</text><text>{{item.expertReply || '--'}}</text></view>
					<view class="replay-time">
						{{item.expertReplyTime || '--'}}
					</view>
				</view>
				<!-- <view class="comments-msg">
					<view class="msg">
						<image src="@/static/img/courseBuy/comments.png" mode="" class="img"></image>
						<text>3</text>
					</view>
					<view class="praise">
						<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
						<text>24</text>
					</view>
				</view> -->

			</view>
		</view>
		<view class="footer-more">
			<view class="view-more" v-if="dataList.length > 0">
				{{ isMore ? "上滑查看更多" : "没有更多了" }}
			</view>
			<view class="view-more" v-if="dataList.length == 0">
				暂无数据
			</view>

		</view>

		<u-mask :show="isApply" @click="isApply = false">
			<view class="comments-input container" @tap.stop>
				<input v-model="applyText" @confirm="apply" :clearable="false" :placeholder="'回复' + ' ' +nickName"
					confirm-type="回复" class="inp-style" :placeholder-style="placeStyle">
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	export default {
		data() {
			return {
				expertId: this.$store.state.expertId,
				dataList: uni.getStorageSync('commentDataList') || [],
				commentsData: {},
				isMore: true,
				// 参数
				params: {
					expertId: this.$store.state.expertId,
					page: 1,
					rows: this.$store.state.rows
				},
				rows: this.$store.state.rows,
				total: '',
				// 评分
				activeColor: '#faad39',
				inactiveColor: '#b2b2b2',
				// 回复对象
				isApply: false,
				nickName: '',
				evaluateId: '',
				applyText: '',
				inpStyle: {
					"height": "60rpx",
					"padding": "0 30rpx",
					"borderRadius": "30rpx",
					"background": "#F3F3F3",
				},
				placeStyle: `
					"color": "#b9babc",
					"fontSize": "24rpx",
				`
			};
		},
		onLoad() {
			this.getExpertEvaluate(this.params)
		},
		computed: {
			getAll() {
				if (Object.keys(this.commentsData).length > 0) {
					let {
						wellReceived,
						middleReceived,
						negativeReceived
					} = this.commentsData;
					let res = (wellReceived || 0) + (middleReceived || 0) + (negativeReceived || 0)
					console.log('总计', res, wellReceived, middleReceived, negativeReceived);
					return res;
				}
			},
			getPraiseRate() {
				if (this.commentsData.wellReceived) {
					let {
						wellReceived,
						middleReceived,
						negativeReceived
					} = this.commentsData;
					let totalPraise = wellReceived + middleReceived + negativeReceived
				
					return ((wellReceived / totalPraise) * 100).toFixed(2) + '%'
				} else {
					return '--'
				}
			}
		},
		onReachBottom() {
			if (this.isMore) {
				this.params.page++;
				this.addRandomData()
			}
		},
		methods: {
			// 获取数据
			getExpertEvaluate(pram) {
				API.expertStatistics().then(res => {
					if (res.code === 200) {
						this.commentsData = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('总评价', this.commentsData);
				})
				API.expertEvaluate(pram).then(res => {
					if (res.code === 200) {
						if (res.result.length < this.rows) {
							this.isMore = false;
						}
						this.dataList = res.result.rows;
						// this.total = res.result.total
						uni.setStorageSync('commentDataList', this.dataList)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('我的评价', res.result);
				})
			},
			toApply(item) {
				if (!item.expertReply) {
					this.isApply = true;
					this.nickName = item.member.nickName;
					this.evaluateId = item.id;
				}
			},
			apply() {
				this.isApply = false;
				let pram = {
					id: this.evaluateId,
					expertReply: this.applyText,
					expertId: this.expertId,
				}
				console.log(pram);
				API.expertEvaluateSave(pram).then(res => {
					if (res.code === 200) {
						const p = {
							page: 1,
							rows: this.params.rows * this.params.page
						}
					
						API.expertEvaluate(p).then(res => {
							if (res.code === 200) {
								if (res.result.length < this.rows) {
									this.isMore = false;
								}
								this.dataList = res.result.rows;
								this.total = res.result.total
								uni.setStorageSync('commentDataList', this.dataList)
							}
							console.log('我的评价', res.result.rows);
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('HUIFU ', res);
				})
			},
			// 加载更多
			addRandomData() {
				// console.log(this.params);
				API.expertEvaluate(this.params).then(res => {
					if (res.code === 200) {
						let result = res.result.rows;
						if (result.length != 0) {
							this.dataList = this.dataList.concat(result);
						}
						if (result.length >= this.rows) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('结果', res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.replayNum {
		font-size: 28rpx;
		font-weight: bold;
	}
	.comprehensive-comments {
		padding: 0rpx 28rpx;
		overflow: hidden;
		background: #fff;
		

		.comments-grade {
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 12rpx;
			margin-top: 29rpx;
			margin-bottom: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.socreAvg {
				font-size: 78rpx;
				font-weight: bold;
				margin-left: 48rpx;
				color: #333333;
			}

			.favorable-rate-row {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 16rpx;

				.favorable-rate {
					// width: 180rpx;
					min-width: 160rpx;
					height: 50rpx;
					background-image: url(@/static/img/courseBuy/msgbg.png);
					background-size: cover;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					padding-left:10rpx ;
					>.text {
						font-size: 20rpx;
						color: #fff;
						margin-left: 8rpx;
						white-space: nowrap;

					}
				}

			}

			.comments-detail {
				height: 100rpx;
				// width: 250rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 20rpx;

				>view {
					display: flex;

					>.text {
						width: 150rpx;
					}
				}
			}
		}

		.comments-row {
			padding: 37rpx 0rpx 22rpx;
			border-bottom: 1rpx solid #EEEEEE;
			display: flex;
			flex-direction: column;

			.comments-peo {
				display: flex;

				.header-img {
					width: 72rpx;
					height: 72rpx;
				}

				.name-date {
					margin-left: 19rpx;
					height: 72rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					>text {
						display: block;
					}

					.name {
						font-size: 28rpx;
						color: #333333;
					}

					.date {
						font-size: 20rpx;
						color: #868686;
					}
				}

				.evaluation {
					display: flex;
					align-items: center;
					margin-left: auto;

					>text {
						margin-right: 8rpx;
						font-size: 20rpx;
						color: #333333;
					}

				}
			}

			.comments-text {
				font-size: 26rpx;
				color: #333333;
				margin-top: 36rpx;
				line-height: 40rpx;
			}

			.comments-img {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: auto;
				padding: 20rpx 0;
				margin-bottom: 20rpx;

				.img {
					margin-right: 20rpx;
					width: 100%;
					height: 260rpx;

					&:last-child {
						margin-right: 0;
					}

				}
			}

			//回复
			.comments-replay {
				width: 100%;
				height: 124rpx;
				padding: 30rpx 20rpx;
				background: #F5F5F5;
				border-radius: 14rpx;

				.replay-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					line-height: 24rpx;
				}

				.replay-time {
					text-align: right;
					font-size: 24rpx;
					color: #999999;
				}
			}

			// 评论，点赞数
			.comments-msg {
				display: flex;
				margin-left: auto;
				margin-top: 30rpx;

				.msg,
				.praise {
					display: flex;
					align-items: center;

					>.img {
						width: 20rpx;
						height: 20rpx;
					}

					>text {
						font-size: 20rpx;
						color: #9D9D9D;
						margin-left: 6rpx;
					}
				}

				.praise {
					margin-left: 20rpx;
				}
			}
		}
	}

	.comments-input {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		.inp-style {
			// color: #b9babc;
			font-size: 24rpx;
			width: 100%;
			height: 60rpx;
			padding: 0 30rpx;
			border-radius: 30rpx;
			background: #F3F3F3;

		}
	}

	// 底部更多
	// .footer-more{
	// 	background-color: #fff;
	// }
</style>
